<template>
  <el-menu
      default-active="2"
      class="el-menu-vertical"
      @open="handleOpen"
      @close="handleClose"
      :router="true"
      style="height: calc(100vh - 44px)"
  >
    <el-menu-item index="/index">
      <el-icon><icon-menu /></el-icon>
      <span>文件管理</span>
    </el-menu-item>
    <el-menu-item index="/transTemplate">
      <el-icon><icon-switch /></el-icon>
      <span>转码配置</span>
    </el-menu-item>
    <el-menu-item index="/transProgress">
      <el-icon><icon-finished /></el-icon>
      <span>转码进度</span>
    </el-menu-item>
  </el-menu>
</template>

<script lang="js" setup>
import { ref } from "vue";
import {
  Menu as IconMenu,
  Switch as IconSwitch,
  Finished as IconFinished,
} from "@element-plus/icons-vue";

const isCollapse = ref(true);
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
};
</script>
